<!--
 * @Author: WangGuojian 1085844536@qq.com
 * @Date: 2023-08-11 19:53:05
 * @LastEditTime: 2023-08-11 20:03:40
 * @LastEditors: WangGuojian 1085844536@qq.com
 * @FilePath: \vue-basic\12-列表渲染\10.总结Vue数据监测.html
 * @Description:
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>总结Vue数据监测</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
            1. vue会监视data中所有层次的数据

            2. 如何监测 `对象` 中的数据？
                通过 `setter` 实现监视，且要在 `new Vue()` 时就传入要监测的数据
                    (1).对象创建后追加的属性，Vue默认不做响应式处理
                    (2).如需给后添加的属性做响应式，请使用如下API
                        `Vue.set(target,propertyName/index,value)`
                        `vm.$set(target,propertyName/index,value)`

            3. 如何监测 **数组** 中的数据？
                通过包裹数组更新元素的方法实现，本质就是做了两件事
                    a. 调用原生对应的方法对数组进行更新
                    b. 重新解析模板，进而更新页面

            4. 在Vue修改数组中的某个元素一定要用如下方法
                push()pop()unshift()shift()splice()sort()reverse()这几个方法被Vue重写了Vue.set()或vm.\$set()

            特别注意：Vue.set() 和 vm.$set() 不能给vm或vm的根数据对象（data等）添加属性.
         -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h1>学生信息</h1>
            <button @click="student.age++">年龄+1岁</button><br />
            <button @click="addSex">添加一个性别属性，默认值是男</button><br />
            <button @click="student.sex = '未知'">修改性别</button><br />
            <button @click="addFriend">在列表首位添加一个朋友</button><br />
            <button @click="updateFirstFriendName">
                修改第一个朋友名字为：张三</button
            ><br />
            <button @click="addHobby">添加一个爱好</button><br />
            <button @click="updateHobby">修改第一个爱好为：开车</button><br />
            <button @click="removeSmoke">过滤掉爱好中的抽烟</button><br />

            <h2>姓名：{{student.name}}</h2>
            <h2>年龄：{{student.age}}</h2>
            <h2 v-if="student.sex">性别：{{student.sex}}</h2>
            <h2>爱好</h2>
            <ul>
                <li v-for="(h, index) in student.hobby" :key="index">{{h}}</li>
            </ul>
            <h2>朋友们</h2>
            <ul>
                <li v-for="(f, index) in student.friends" :key="index">
                    {{f.name}}-{{f.age}}
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: '#root',
            data: {
                student: {
                    name: 'tom',
                    age: 18,
                    hobby: ['抽烟', '喝酒', '烫头'],
                    friends: [
                        { name: 'jerry', age: 35 },
                        { name: 'tony', age: 36 },
                    ],
                },
            },
            methods: {
                addSex() {
                    // Vue.set(this.student, 'sex', '男');
                    this.$set(this.student, 'sex', '男');
                },
                addFriend() {
                    this.student.friends.unshift({ name: 'jack', age: 70 });
                },
                updateFirstFriendName() {
                    this.student.friends[0].name = '张三';
                },
                addHobby() {
                    this.student.hobby.push('学习');
                },
                updateHobby() {
                    // this.student.hobby.splice(0, 1, '开车');
                    this.$set(this.student.hobby, '0', '开车');
                },
                removeSmoke() {
                    this.student.hobby = this.student.hobby.filter((h) => {
                        return h !== '抽烟';
                    });
                },
            },
        });
    </script>
</html>
